import {createStore} from "vuex"

//vuex的核心属性:state mutations actions getters modules

//state:存储组件之间共享的数据


//引入模块化的store

import product from "./product"
import cart from "./cart"

//rootStore

export default createStore({
    state() {
        return {
            msg: "第一次使用vuex,泰裤辣",
            num: 40,
            //存储购物车的数据
            carts: []
        }
    },
    //用于修改vuex数据
    //mutations中都是函数,函数名字就是类型的名字
    //mutations中的逻辑都必须是同步的
    mutations: {
        //mutations中的函数会接收state作为自己的参数
        increase(state, payload) {
            state.num = state.num + payload
        },
        decrease(state) {
            state.num--
        },
        //修改购物车数据的方法
        setCarts(state, payload) {
            state.carts = payload
        }
    },
    //actions的作用就是用于处理vuex的异步逻辑
    //如果要在vuex中发送异步请求 那么需要放在actions中进行发送
    actions: {
        //actions中的参数和mutations中的参数差不多

        //都是由函数组成

        //actions函数中接收的参数是context和payload

        fetchCart(context, payload) {
            console.log(context)
            console.log(payload)

            //异步流程:

            //1.在actions中发送请求

            //2.获取结果之后,通过commit提交给mutation

            //3.mutation修改状态

            fetch('http://chst.vip/data/index.json')
                .then(response => response.json())
                .then(res => {
                    // console.log(res)
                    context.commit('setCarts', res.data)
                })
        }
    },
    getters: {
        //getters相当于是vue组件中的computed属性
        //对数据进行预处理
        //getters中的函数会接收state作为参数
        reverseMsg(state) {
            return state.msg.split("").reverse().join("")
        }
    },
    modules: {
        product,
        cart
    }
})